<template>
  <div class="article">
    <van-nav-bar
      title="文章详细"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>

    <div class="title">{{ articeData.title }}</div>
    <van-cell>
      <div class="user">
        <div class="userImg">
          <img
            v-if="articeData.aut_photo"
            class="img"
            :src="articeData.aut_photo"
            alt=""
          />
          <img v-else class="img" src="@/assets/logo.png" alt="" />
        </div>
        <div class="userDetails">
          <div class="top">{{ articeData.aut_name }}</div>
          <div class="bottom">{{ articeData.pubdate | formatTime }}</div>
        </div>
        <div class="btn">
          <van-button
            v-if="this.focus && this.focusId.includes(this.userId)"
            type="info"
            @click="noFocusOn"
            >已关注</van-button
          >
          <van-button v-else type="info" @click="focusOn">+关注</van-button>
        </div>
      </div></van-cell
    >
    <van-cell>
      <div class="content" v-html="articeData.content"></div>
    </van-cell>
    <div class="btnBox">
      <div class="left">
        <van-button
          round
          @click="dislikesDel"
          v-if="this.likeId.includes(this.id) && this.focusArtic"
          class="red"
          ><span class="iconfont">&#xe603;</span> 点赞</van-button
        >
        <van-button round @click="like" v-else
          ><span class="iconfont">&#xe603;</span> 点赞</van-button
        >
      </div>
      <div class="right">
        <van-button
          round
          @click="canDisArticle"
          v-if="this.dislikeArtic && this.dislikeArticId.includes(this.id)"
          class="red"
        >
          <span class="iconfont">&#xe601;</span>不喜欢</van-button
        >
        <van-button round @click="disArticle" v-else>
          <span class="iconfont">&#xe601;</span>不喜欢</van-button
        >
      </div>
    </div>
    <div class="comments">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="bol"
      >
        <van-cell v-for="(item, index) in list" :key="index"
          ><div class="commItem">
            <div class="userImg">
              <img v-if="item.aut_photo" :src="item.aut_photo" alt="" />
              <img v-else src="@/assets/logo.png" alt="" />
            </div>
            <div class="userName"></div>
            <div class="comm">
              <p>{{ item.aut_name }}</p>
              <p>{{ item.content }}</p>
              <div>
                {{ item.pubdate | formatTime }}
                <van-button class="btn" @click="showPopup(item)"
                  >回复{{ item.reply_count }}</van-button
                >
              </div>
            </div>
            <span v-if="commentId" id="red" class="like iconfont">
              &#xe605;{{ item.like_count }}
            </span>
            <span v-else class="like iconfont">
              &#xe605;{{ item.like_count }}
            </span>
          </div></van-cell
        >
      </van-list>
    </div>
    <div class="commFiled">
      <van-field
        border
        v-model="comment"
        placeholder="写评论"
        class="input"
      /><van-button class="send" type="primary" @click="send">发送</van-button>
    </div>
    <div>
      <van-popup v-model="show" position="bottom" class="prop">
        <van-cell title="当前评论"> </van-cell>
        <van-cell
          ><div class="commItem">
            <div class="userImg">
              <img src="@/assets/logo.png" alt="" />
            </div>
            <div class="comm">
              <p>{{ this.currentReview.aut_name }}</p>
              <p>{{ this.currentReview.content }}</p>
              <div>
                {{ this.currentReview.pubdate | formatTime }}
              </div>
            </div>
            <div class="like iconfont">
              &#xe605;{{ this.currentReview.like_counto }}
            </div>
          </div></van-cell
        >
        <van-cell title="回复的评论"> </van-cell>
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad2"
        >
          <van-cell v-for="(item, index) in list2" :key="index"
            ><div class="commItem">
              <div class="userImg">
                <img v-if="item.aut_photo" :src="item.aut_photo" alt="" />
                <img v-else src="@/assets/logo.png" alt="" />
              </div>
              <div class="userName"></div>
              <div class="comm">
                <p>{{ item.aut_name }}</p>
                <p>{{ item.content }}</p>
              </div>

              <div class="like iconfont">&#xe605;{{ item.like_count }}</div>
            </div></van-cell
          >
        </van-list>
        <div class="commFiled">
          <van-field
            border
            placeholder="我来说两句"
            class="input"
            v-model="comm"
          /><van-button class="send" type="primary" @click="sendComm"
            >发送</van-button
          >
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  getArticeData,
  getComments,
  followings,
  likings,
  focusOn,
  dislikes,
  dislikesDel,
  cancelDislikes,
  comments,
  commentLikings,
  comments1
} from '@/api/article.js'
export default {
  created () {
    this.getArticeData()
  },
  data () {
    return {
      articeData: '',
      // 文章id
      id: 3,
      // 用户id
      userId: '',
      list: [],
      loading: false,
      finished: false,
      loading2: false,
      finished2: false,
      show: false,
      // 是否点赞文章id
      likeId: [],
      // 是否关注用户
      focus: '',
      // 关注用户id
      focusId: [],
      // 是否关注文章
      focusArtic: '',
      // 是否不喜欢文章
      dislikeArtic: '',
      // 不喜欢文字id
      dislikeArticId: [],
      // 评论内容
      comment: '',
      // 静默刷新
      bol: true,
      // 评论点赞id
      commentId: false,
      // 当前评论
      currentReview: '',
      // 评论回复
      rComments: '',
      // 评论回复内容
      list2: [],
      // 评论id
      commId: '',
      // 评论回复内容
      comm: ''
    }
  },
  methods: {
    // 获取文章详细
    async getArticeData (id) {
      const res = await getArticeData(this.id)
      this.articeData = res.data.data
      // this.proto = res.data.data.aut_photo
      this.userId = res.data.data.aut_id
      console.log(this.userId)
    },
    // 打开弹出框
    async showPopup (item) {
      this.show = true
      console.log(item)
      this.currentReview = item
      this.commId = item.com_id
      console.log(this.commId)
      this.onLoad2()
    },
    // 导航栏左侧点击跳转到首页
    onClickLeft () {
      this.$router.push('/home/homepage')
    },
    // 关注用户
    async focusOn () {
      const res = await focusOn(this.userId)
      this.focus = res.status
      console.log(res)
      this.focusId.push(res.data.data.target)
      if (res.status === 200) {
        this.focus = true
      }
    },
    // 取消关注用户
    async noFocusOn () {
      const res = await followings(this.userId)
      console.log(res)
      if (res.status === 204) {
        this.focus = false
      }
    },

    async onLoad () {
      // 获取评论
      const res = await getComments({
        type: 'a',
        source: 3
      })
      // 回复评论
      // const res1 = await getComments({
      //   type: 'c',
      //   source: 1345261542911770600
      // })
      // console.log(res1)
      // 加载状态结束
      console.log(res)
      this.loading = false
      this.list = [...res.data.data.results]
      console.log(this.list)
      console.log(this.commentId)
      console.log(this.list.length)
      // 数据全部加载完成
      // res.data.data.total_count
      console.log(res.data.data.total_count)
      if (this.list.length >= res.data.data.results.length) {
        this.finished = true
      }
      console.log(res.data.data.total_count)
    },
    async onLoad2 () {
      // 获取评论
      const res = await getComments({
        type: 'c',
        source: this.commId
      })
      console.log(this.commId)
      console.log(res)
      this.loading2 = false
      this.list2 = [...res.data.data.results]
      console.log(this.list2)
      console.log(this.list2.length)

      // 数据全部加载完成
      // res.data.data.total_count
      if (this.list2.length >= res.data.data.total_count) {
        this.finished2 = true
      }
    },
    // 文章点赞
    async like () {
      const res = await likings(3)
      console.log(res)
      this.likeId.push(res.data.data.target)
      if (res.status === 201) {
        this.focusArtic = true
        this.dislikeArtic = false
      }
    },
    // 取消文章点赞
    async dislikesDel () {
      const res = await dislikesDel(3)
      console.log(res)
      if (res.status === 204) {
        this.focusArtic = false
      }
    },
    // 不喜欢文章
    async disArticle () {
      const res = await dislikes(3)
      console.log(res)
      if (res.status === 201) {
        this.dislikeArtic = true
        this.focusArtic = false
      }
      this.dislikeArticId.push(res.data.data.target)
    },
    // 取消不喜欢文章
    async canDisArticle () {
      const res = await cancelDislikes(3)
      console.log(res)
      this.dislikeArtic = false
    },
    // 发送评论
    async send () {
      console.log(this.comment)
      await comments(this.id, this.comment)
      const res1 = await getComments({
        type: 'a',
        source: 3
      })
      this.comment = ''

      this.list.unshift(res1.data.data.results[0])
      console.log(this.list)
      this.bol = false
      this.loading = true
      this.$nextTick(() => {
        this.bol = true
      })
    },
    // 回复评论
    async sendComm () {
      const res = await comments1({
        target: this.commId,
        content: this.comm,
        art_id: this.id
      })
      this.comm = ''
      const res1 = await getComments({
        type: 'c',
        source: this.commId
      })
      console.log(res1)
      this.list2.unshift(res1.data.data.results[0])
      console.log(res)
    },
    // 评论点赞
    async commFocus () {
      const res = await commentLikings(this.id)
      this.commentId = true
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.article {
  word-wrap: break-word;
  word-break: break-all;
  position: relative;
  .title {
    text-align: center;
  }
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userImg {
      .img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }
    }
    .userDetails {
      flex: 1;
    }
  }
  .btnBox {
    display: flex;
    justify-content: space-around;
  }
  .commItem {
    display: flex;
    align-items: center;
    .comm {
      flex: 1;
      .btn {
        height: 25px;
        width: 80px;
        border-radius: 25px;
        background-color: #cccccc;
      }
    }
    .userImg {
      img {
        border-radius: 50%;
        width: 50px;
        height: 50px;
      }
    }
  }
  .commFiled {
    height: 45px;
    overflow: hidden;
    display: flex;
    position: fixed;
    justify-content: space-around;
    bottom: 0;
    background-color: #fff;
    .input {
      border: 1px solid #cccccc;
      border-radius: 20px;
      width: 310px;
      flex: 1;
    }
  }
  .prop {
    padding-top: 45px;
    height: 45px;
    height: 70%;
    .commFiled {
      overflow: hidden;
      display: flex;
      position: fixed;
      justify-content: space-around;
      bottom: 0;
      background-color: #fff;
      .input {
        border: 1px solid #cccccc;
        border-radius: 20px;
        width: 310px;
        flex: 1;
      }
    }
  }
  .comments {
    padding-bottom: 45px;
  }
  .red {
    background-color: red !important;
  }
  #red {
    color: red;
  }
}
</style>
